﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<List<Kampeerplek>>" %>
<%@ Import namespace="ICT4Events.Models" %>
<%@ Import namespace="ICT4Events" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	Nieuwe Reservering
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<script src="../../Scripts/jquery.maphilight.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.metadata.min.js" type="text/javascript"></script>

	<style>
		input.text { margin-bottom:12px; width:95%; padding: .4em; }
		fieldset { padding:0; border:0; margin-top:25px; }		
	</style>
     
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            var selected = 0;

            $('.map').maphilight();
//            $("#dialog-form").dialog({
//                autoOpen: false,
//                height: 400,
//                width: 450,
//                modal: true,
//                close: function () {
//                    allFields.val("").removeClass("ui-state-error");
//                }
//            });
             
            <%foreach(Kampeerplek k in Model){ %>
                $('#<%= k.PlaatsNummer %>').click(function () {
                document.getElementById('Kampeerplaats').value = '<%= k.PlaatsNummer %>';
                    $("#lbp").html('Plaats nr: ');
                    $("#lbk").html('<%=k.PlaatsNummer %>');
                });
            <%} %>
        });

    </script>

    <h2>Kampeerplaats toevoegen</h2>
    <%=Html.ValidationSummary("Foutieve invoer. Probeer het opnieuw. ") %>

    <div style="float:left; margin-right: 30px">
    <img src="../../Content/Map2.png" style="" class="map" usemap="#kaart" >
    <map name="kaart">
    <%foreach (Kampeerplek kp in Model)
      {%>
        <area id=<%=kp.PlaatsNummer %> shape="circle" coords=<%=kp.X %>,<%=kp.Y %>,12" title="<%=kp.PlekInfo() %>" class="{strokeWidth:2,fillOpacity:0.3,strokeColor: '00ff00',alwaysOn: false, fillColor: '00ff00'}"/>
    <%} %>
        
        <%foreach (Kampeerplek kpg in (List<Kampeerplek>)ViewData["kpg"])
      {%>
        <area id=<%=kpg.PlaatsNummer %> shape="circle" coords=<%=kpg.X %>,<%=kpg.Y %>,12" title="<%=kpg.PlekInfo() %> <%="\n\n" %>Deze kampeerplaats is al gereserveerd" class="{strokeWidth:2,fillOpacity:0.3,strokeColor: 'ff0000',alwaysOn: false, fillColor: 'ff0000'}"/>
    <%} %>
    </map>

    </div>
    <div id="Nieuwe reservering" style="float:left">
	    
        <form action="/Home/NieuweReservering" method="post">
	        <h3>Kampeerplaats</h3>
                <label id="lbp">Klik op een kampeerplaats</label> <label id="lbk"></label>
                
                <input type=hidden name="Kampeerplaats" id="Kampeerplaats" value="0"/>
		        <div><label>Personen toevoegen</label>
		        <%= Html.DropDownList("AantalPersonen") %></div>
                <hr />
                <div style="float:right"><input id="submit" type=submit value="Toevoegen"/></div>
	    </form>

    </div>
    <div style="clear:both"></div>
   
</asp:Content>
